<route type="home" lang="json">
{
  "layout": "tabbar",
  "style": { "navigationBarTitleText": "" },
  "name": "match"
}
</route>
<script setup lang="ts">
import shangyi from '@/static/上衣.png';

const type = ref<
  'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
>('primary');
const position = ref<
  | 'left-top'
  | 'right-top'
  | 'left-bottom'
  | 'right-bottom'
  | 'left-center'
  | 'right-center'
  | 'top-center'
  | 'bottom-center'
>('bottom-center');
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top');
const disabled = ref<boolean>(false);
</script>

<template>
  <view>
    <wd-grid>
      <wd-grid-item
        use-icon-slot
        text="文字"
        v-for="index in 3"
        :key="index"
        icon-size="36px"
      >
        <template #icon>
          <image class="slot-img" :src="shangyi" />
        </template>
      </wd-grid-item>
    </wd-grid>
    <wd-fab :disabled="disabled" :type="type" :direction="direction">
      <wd-button
        :disabled="disabled"
        custom-class="custom-button"
        type="primary"
        round
      >
        <wd-icon name="github-filled" size="22px"></wd-icon>
      </wd-button>
    </wd-fab>
  </view>
</template>

<style scoped>
.contain {
  padding: 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f8f9fa;
}
.slot-img {
  height: 36px;
  width: 36px;
  border-radius: 4px;
}
:deep(.custom-button) {
  min-width: auto !important;
  box-sizing: border-box;
  width: 32px !important;
  height: 32px !important;
  border-radius: 16px !important;
  margin: 8rpx;
}

:deep(.custom-radio) {
  height: 32px !important;
  line-height: 32px !important;
}
</style>
